<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- <meta http-equiv="refresh" content="60; url=four.html" /> -->
    <meta charset="UTF-8">
    <title>operate</title>
    <script src="./js/jquery-3.2.1.js"></script>
    <script src="./js/vue.min.js"></script>
    <style type="text/css">
        html,
        body {
            margin: 0;
            padding: 0;
            font-family: "微软雅黑";
        }

        .animationg-conent {
            width: 3840px;
            height: 1080px;


        }


        .operate-conent::-webkit-scrollbar,
        body::-webkit-scrollbar {
            display: none;
        }

        .content {
            width: 3680px;
            margin: 0 auto;
            height: 1080px;

        }

        .animationg-conent .imglists {
            display: flex;
            position: relative;
            overflow: hidden;
            height: 1080px;
        }

        .imglists .item-img {
            cursor: pointer;
            position: absolute;
            display: flex;
            align-items: center;
            width: 350px;
            height: 350px;
        }

        .imglists .item-img img {
            width: 100%;
            height: 100%;
        }

        .imglists .item-img:nth-child(1) {
            top: 365px;
            left: 128px;
        }

        .imglists .item-img:nth-child(2) {
            top: 514px;
            left: 704px;
        }

        .imglists .item-img:nth-child(3) {
            top: 324px;
            left: 1225px;
        }

        .imglists .item-img:nth-child(4) {
            top: 536px;
            left: 1740px;
        }

        .imglists .item-img:nth-child(5) {
            top: 360px;
            left: 2258px;
        }

        .imglists .item-img:nth-child(6) {
            top: 629px;
            left: 2753px;
        }

        .imglists .item-img:nth-child(7) {
            top: 323px;
            left: 3269px;
        }

        /* 动态效果 */

        /* .imgView {
            width: 0px;
            overflow: hidden;
            height: 350px;
        } */

        /* .showBox {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 350px;
            animation: extend 1s;
            animation-iteration-count: 1;
            animation-timing-function: linear;
        } */

        .big-content {
            overflow: hidden;
            position: relative;
        }

        .bigBg {
            background: url('./newImg/animaBg.png') no-repeat;
            height: 1080px;
            width: 3840px;
            position: absolute;
            /* name time duration timing-function delay iteration-count direction fill-mode; */
            animation: extend 10s;
            /*控制背景色加载时间*/
            animation-iteration-count: 1;
            animation-timing-function: linear;
            animation-fill-mode: forwards; 
        }
        @keyframes extend {
            0% {
                width: 0px;
            }

            100% {
                width: 3840px;
            }
        }

        .scroll-reel {
            position: absolute;
            height: 1080px;
            left: 40px;
            animation: scrollmove 10s;
            /*控制轴 加载时间 (注意和背景色加载时间一直)*/
            /* duration timing-function delay iteration-count direction fill-mode; */
            animation-iteration-count: 1;
            animation-timing-function: linear;
            animation-fill-mode: forwards;
            overflow: hidden;
        }

        @keyframes scrollmove {
            0% {
                left: 0px;
            }

            100% {
                left: 3840px;
                /* width: 0px; */

            }
        }

        .imglists {
            /*name time duration timing-function delay iteration-count direction fill-mode; */
            animation: contentmove 12s;
            /*控制轴 加载时间 (注意和背景色加载时间一直)*/
            animation-iteration-count: 1;
            animation-timing-function: linear;  /*animation-timing-function 规定曲线速度 */
            animation-fill-mode: forwards; 
            overflow: hidden;
        }

        @keyframes contentmove {
            0% {
                width: 0px;
            }

            100% {
                width: 3680px;
            }
        }

        /* 中间字体大小控制 */

        .curImg {
            transform: scale(1.5);
            transition: transform 1s linear;
        }
        .sximg{
            transform: scale(1);
            transition: transform 1s linear;
        }

        /* 中间字体大小控制 end */
        /* 动态效果 end */
    </style>
</head>

<body>
    <div class="animationg-conent" id="app">
        <div class="big-content">
            <div class="bigBg"></div>
            <!-- <img  src="./newImg/animaBg.png"> -->
            <img v-if="isShow" src="./newImg/255.png" class="scroll-reel">
            <div class="content">
                <div class="imglists">
                    <!-- @mouseenter="selectImg(index)" @click="selectImg(index)"-->
                    <div class="item-img" v-for="(item,index) in imgLists" :class="{curImg:curIndex===index,sximg:(curIndex-1)===index}">
                        <div class="imgView" :id="'anmiate'+index">
                            <img class="bgImg" :src="item.smimgSrc" />
                        </div>
                        <!-- <img v-else class="smImg" :src="item.bgImgSrc" /> -->
                    </div>

                </div>
                <!-- <div class="imglists right"></div> -->
            </div>
        </div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                curIndex: 0,
                bgSrc: 'bigImg.png',
                imgLists: [
                    { id: 0, smimgSrc: 'newImg/交.png', bgImgSrc: 'newImg/交-.png', show: false },
                    { id: 1, smimgSrc: 'newImg/运.png', bgImgSrc: 'newImg/运-.png', show: false },
                    { id: 2, smimgSrc: 'newImg/仓.png', bgImgSrc: 'newImg/仓-.png', show: false },
                    { id: 3, smimgSrc: 'newImg/园.png', bgImgSrc: 'newImg/园-.png', show: false },
                    { id: 4, smimgSrc: 'newImg/管.png', bgImgSrc: 'newImg/管-.png', show: false },
                    { id: 5, smimgSrc: 'newImg/数.png', bgImgSrc: 'newImg/数-.png', show: false },
                    { id: 6, smimgSrc: 'newImg/金.png', bgImgSrc: 'newImg/金-.png', show: false }
                ],
                left: 40,
                isShow: true

            },
            created() {
                // setTimeout(() => {
                //     this.curIndex++
                // }, 1000)

                let timers = setInterval(() => {
                    if (this.curIndex<7) {
                        this.curIndex++
                    }else{
                      clearInterval(timers)
                    }
                }, 1800)
                
            },
            methods: {
                selectImg(val) {
                    this.curIndex = val + 1;
                },
            },
        })
    </script>
    <script>
        $(function () {
            $("body").click(function () {
                window.location.href = "./park.html"
            })
        })
    </script>
</body>

</html>